<template>
  <div class="customer_for_code">
    <div class="flex flex-horizontal-end">
      <Button type="primary" @click="addActivity" v-if="unlocking('0107100100')">新建活动</Button>
      <Button
        type="primary"
        :disabled="list.length == 0"
        style="margin-left: 10px"
        @click="exportExcel"
        v-if="unlocking('0107100600')">
        导出excel
      </Button>
      <Button type="primary" style="margin-left: 10px">
        <a
          href="https://images.tospurfang.com/doc/%E7%A0%81%E4%B8%8A%E8%8E%B7%E5%AE%A2%E6%93%8D%E4%BD%9C%E6%8C%87%E5%BC%95.pdf"
          style="color: #fff"
          target="_blank">
          查看操作指引
        </a>
      </Button>
    </div>
    <dt-grid ref="table" page :onFetch="onFetch" :select="{ sort: sortCase }" />
    <add-activity ref="addActivity" @success="onSuccess" />
    <download-modal ref="downloadModal" />
  </div>
</template>

<script>
  import columnOpt from './opt/column.js'
  import activityMgr from '@/biz/customerForCode/activity'
  import addActivity from './component/addActivity.vue'
  import downloadModal from './component/downloadModal.vue'

  export default {
    components: {
      addActivity,
      downloadModal
    },
    data() {
      return {
        visitsNumSort: '',
        newCluesSort: '',
        visitCustomerSort: '',
        signCustomerSort: '',
        filterParams: null,
        list: []
      }
    },
    methods: {
      sortCase(sort) {
        console.log(sort, sort.order, sort.prop, 'vvvvvvvmmmmmmmmmmm')
        if (sort.prop == '_txt_visitsNum') {
          this.visitsNumSort = sort.order || ''
        } else {
          this.visitsNumSort = ''
        }
        if (sort.prop == '_txt_newClues') {
          this.newCluesSort = sort.order || ''
        } else {
          this.newCluesSort = ''
        }
        if (sort.prop == '_txt_visitCustomer') {
          this.visitCustomerSort = sort.order || ''
        } else {
          this.visitCustomerSort = ''
        }
        if (sort.prop == '_txt_signCustomer') {
          this.signCustomerSort = sort.order || ''
        } else {
          this.signCustomerSort = ''
        }
        this.$refs.table.fetch()
      },
      addActivity() {
        let data = {
          title: '新增活动',
          isEdit: false
        }
        this.$refs.addActivity.show(data)
      },
      onFetch(data) {
        let params = {
          ...data,
          buildingId: this.$dt.buildInfo().housesId,
          visitsNumSort: this.visitsNumSort,
          newCluesSort: this.newCluesSort,
          visitCustomerSort: this.visitCustomerSort,
          signCustomerSort: this.signCustomerSort
        }
        this.filterParams = params
        return activityMgr.list(params).then((res) => {
          this.list = res.records
          res.list = res.records
          return res
        })
      },
      exportExcel() {
        activityMgr.listExport(this.filterParams)
      },
      checkFun(data) {
        this.$router.push({
          name: 'customerForCodeDetail',
          query: {
            activityId: data.activityId
          }
        })
      },
      editFun(obj) {
        let data = {
          title: '编辑活动',
          isEdit: true,
          ...obj
        }
        this.$refs.addActivity.show(data)
      },
      downloadFun(data) {
        let obj = {
          id: data.activityId,
          activityName: data.activityName
        }
        this.$refs.downloadModal.show(obj)
      },
      //拓客码
      expandFun(row) {
        console.log(row)
        let data = {
          activityId: row.activityId,
          activityName: row.activityName
        }
        this.$router.push({
          path: 'expandCodeDetail',
          query: data
        })
      },
      delFun(data) {
        this.$Modal.confirm({
          title: '提示',
          content: `是否确认要删除？`,
          okText: '确认',
          closable: true,
          onOk: () => {
            let params = {
              id: data.activityId
            }
            activityMgr.del(params).then((res) => {
              this.$refs.table.fetch(true)
              this.$Message.success('删除成功')
            })
          }
        })
      },
      onSuccess() {
        this.$refs.table.init(this, new columnOpt.Column(this))
        this.$refs.table.fetch(true)
      }
    },
    mounted() {
      this.$refs.table.init(this, new columnOpt.Column(this))
      this.$refs.table.fetch()
    }
  }
</script>

<style lang="scss" scoped>
  .customer_for_code {
    padding: 20px;
  }
</style>
